<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<link href="css/jquery-ui-1.7.custom.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jqueryui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jqueryui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="js/jqueryui/jquery.ui.effect-pulsate.js"></script>
<script type="text/javascript" src="js/webSocket.js"></script>

<style type="text/css">
li {
	list-style-type: none;
	border: 1px solid #d3d3d3;
	width: 99.7%;
	height: 30px;
	margin-top: .1em;
	padding-top: 0px;
}

ul {
	margin: 0px;
	padding: 0px;
}

.picture {
	width: 30px;
	height: 30px;
	float: left;
}

.friend {
	height: 30px;
	font-weight: bold;
	float: left;
	padding-top: 3px;
	margin-left: .5em;
}

.ui-dialog .ui-dialog-content {
	border: 0;
	padding: .1em .1em;
	background: none;
	overflow: auto;
	zoom: 1;
}
.myMsg{float: left;}
.friendMsg{float: right;}
</style>

</head>
<body>
	<div id="signIn">
		<table align="center">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="name" id="name" /></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="text" name="pwd" id="pwd" /></td>
			</tr>
		</table>
	</div>

	<div id="chat" style="display: none;">
		<table width="100%" height="100%" border="0">
			<tr>
				<td>
					<div style="overflow-y: scroll; height: 360px;">
						<div id="content" style="width: 100%; height: 100%;"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td height="30"><textarea class="ckeditor" cols="53"
						id="message" name="message" rows="5">
					</textarea> <input style="float: right;" type="button" id="send" value="send"
					onclick="sendMsg(this)" /></td>
			</tr>
		</table>
	</div>

	<div id="friends" style="display: none;">
		<ul id="friendGroup"></ul>
	</div>
	
	<div id="myMsg" style="display: none;">
		<div style="margin-top: 5px; padding: 0 .2dem;border: 1px solid #AAAAAA;background-color: #D8D8D8;">
			<p>
				<span style="color: #0000FF;margin-bottom: 10px;padding-left: 5px;" id="header">Hey!</span><br/>
			 	<span id="msg" style="padding-left: 20px;">Sample ui-state-highlight style.</span>
			 </p>
		</div>
	</div>
	
</body>
</html>